// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
// VueX五大属性
// 1. state 定义数据 可以直接$store.state.xxx获取 也可以使用mapState(['属性名'])取数据
// 2. mutations 同步修改状态的方法，可以直接$store.commit('方法名')调用，也可以使用mapMutations(['方法名'])调用
// 3. actions 管理异步代码
// 4. getters 类似计算属性
// 5、Modules分模块管理数据
const store = new Vuex.Store({
  // 开启严格模式，提升性能（一般都是打开的，打开之后修改方法不允许使用异步代码）
  strict: true,
  // 定义数据
  state: {
    count: 2,
    list: [1, 2, 3, 4]
  },
  // 定义修改state的方法
  mutations: {
    // 定义修改state的方法
    // 不允许使用异步代码，
    // payload形参
    addFn (state, payload) {
      state.count += payload
    }
  },
  // 定义管理异步代码--发请求
  actions: {
    // 定义异步方法
    // 异步代码可以使用异步代码
    // context 上下文（整个store）
    // payload 形参
    asyncAddFn (context, payload) {
      setTimeout(() => {
        context.commit('addFn', payload)
      }, 1000)
    }
  },
  getters: {
    // 定义计算属性
    // 计算属性的返回值就是计算属性的值
    // 过滤奇数
    xxxList (state) {
      return state.list.filter(item => item % 2 === 0)
    }
  }
})

// 导出仓库
export default store
